<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>05_新增表单控件属性</title>
  </head>
  <body>
    <!-- placeholder 属性，placeholder属性，当输入框没有内容时，显示的提示信息 -->
    <form action="">
      <!-- required 验证属性，required属性，当输入框没有内容时，提交表单会失败 -->
      <!-- autofocus 验证属性，autofocus属性，当页面加载时，自动获取焦点 -->
      <!-- autocomplete 属性，autocomplete属性，当输入框有内容时，自动填充内容,仅支持input的text类型-->
      <!-- pattern 验证属性，pattern属性，当输入框有内容时，验证内容是否符合 '正则表达式',必须与required一起使用 -->

      <!-- 单行输入框 -->
      账号：<input
        type="text"
        name="username"
        placeholder="请输入账号"
        required
        autofocus
        autocomplete="on"
        pattern="\w{6,12}"
      />
      密码：<input
        type="password"
        name="pwd"
        placeholder="请输入密码"
        required
      />
      <br />

      <!-- 单选框 -->
      性别：
      <input type="radio" name="gender" value="male" />男
      <input type="radio" name="gender" value="female" required />女
      <br />
      <!-- 多项选择框 -->
      爱好：
      <input type="checkbox" name="hobby" value="football" />足球
      <input type="checkbox" name="hobby" value="basketball" required />篮球
      <br />
      <!-- 多行输入框 -->
      其他：<textarea
        name="other"
        id=""
        placeholder="请输入其他"
        required
      ></textarea>
      <br />
      <!-- 普通按钮 -->
      <button>提交</button>
    </form>
  </body>
</html>
